@import (reference) "../defs.less";


@img_base: '../../images';


/*
 * The .diff-changes-* rules are used only within JavaScript code to
 * figure out the colors used to display the file complexity icons.
 */
.diff-changes-icon-insert {
  color: @diff-insert-dot-color;
}

.diff-changes-icon-replace {
  color: @diff-replace-dot-color;
}

.diff-changes-icon-delete {
  color: @diff-delete-dot-color;
}


.sidebyside {
  @diff-cell-padding: 1px;
  @linenum-padding-right: 4px;
  @linenum-padding-left: 2px;

  /*
   * Most of the moved range border sits on the line number cell as a
   * border-right, and part sits on the content cell as a border-left. This
   * gives us a full 4px, which is nicely visible, while allowing us to keep
   * a reasonable padding in both types of cells, without also needing to
   * press any text right up against the border.
   */
  @moved-border-right-width: 3px;
  @moved-border-left-width: 1px;

  background: white;
  border-collapse: separate;
  border-spacing: 0;
  padding: 0;
  width: 100%;
  overflow: hidden;

  // This fixes an annoying 1px bright line between the bottom of the
  // side-by-side diff view and the bottom border of the roundrect it's
  // contained within.
  margin-bottom: -1px;

  &.diff-error {
    td {
      background: @diff-error-color;
      padding: 1em;

      a:not(.btn) {
        color: @link-color;
        font-weight: bold;
      }

      h2 {
        font-size: 10pt;
        margin: 0em 0 2em 0;
        padding: 0;

        .rb-icon {
          vertical-align: text-bottom;
        }
      }
    }

    .error-details {
      display: none;

      pre {
        background: white;
        border: 1px #999 solid;
        padding: 1em;
      }

      td {
        padding-top: 0;
      }
    }

    .revision-row th {
      padding-left: 4em;
    }
  }

  &.newfile {
    col {
      &.left {
        width: 0%;
      }

      &.right {
        width: 100%;
      }
    }

    td .diff-collapse-btn {
      right: 50%;
    }
  }

  &.selecting-col-1:not(.newfile) {
    td.r {
      &, * {
        .unselectable();
      }
    }
  }

  &.selecting-col-3 {
    td.l {
      &, * {
        .unselectable();
      }
    }
  }

  &.-hide-ducs {
    .rb-o-duc {
      &::before {
        display: none;
      }

      &::after {
        content: attr(data-char);
      }
    }
  }

  a {
    color: black;
    text-decoration: none;
  }

  col {
    &.left {
      width: 50%;
    }

    &.right {
      width: 50%;
    }

    &.line {
      width: 1%; /* Make sure this doesn't stretch if the header stretches. */
    }
  }

  img.header-file-icon {
    vertical-align: middle;
  }

  pre {
    font-size: 8pt;
    line-height: 140%;
    margin: 0;
    padding-left: @linenum-padding-left;

    /*
     * We ideally want break-spaces, which behaves like pre-wrap but will break
     * in the middle of whitespace. Not all browsers support this, so we have
     * to fall back.
     */
    white-space: pre-wrap;
    white-space: break-spaces;

    /*
     * overflow-wrap is the modern name, but some browsers need word-break
     * to work right. Edge, IE, and Safari, for instance, do not support this or
     * treat it correctly at the time of this writing (April 11, 2017). Guides
     * suggest specifying both, so we're specifying both.
     */
    overflow-wrap: break-word;
    word-break: break-all;
  }

  .fa-warning {
    color: #rb-ns-ui.colors[@red-50];
  }

  .indent {
    color: #A3CCA3;
  }

  .unindent {
    color: #CCA3A3;
  }

  .moved-row-start {
    pre {
      margin-top: 4px;
    }
  }

  .moved-row td {
    &.moved-from, &.moved-to {
      border-left-width: @moved-border-left-width;
      border-left-style: solid;

      pre {
        padding-left: @linenum-padding-left - @moved-border-left-width;
      }
    }

    &.moved-from {
      border-left-color: @diff-moved-from-bg-color;
    }

    &.moved-to {
      border-left-color: @diff-moved-to-bg-color;
    }
  }

  .moved-row th {
    &.moved-from, &.moved-to {
      border-right-width: @moved-border-right-width;
      border-right-style: solid;
      padding-right: @linenum-padding-right - @moved-border-right-width;
    }

    &.moved-from {
      border-right-color: @diff-moved-from-bg-color;
    }

    &.moved-to {
      border-right-color: @diff-moved-to-bg-color;
    }
  }

  .moved-to .moved-flag {
    background-color: @diff-moved-to-bg-color !important;
  }

  .moved-from .moved-flag {
    background-color: @diff-moved-from-bg-color !important;
  }

  .moved-flag {
    background-color: inherit !important;
    display: inline-block;
    font-size: 7pt;
    padding: 0;

    /*
     * We need to compensate for some spacing in the cells. The TD for the
     * cell is @diff-cell-padding around the sides, which is simple.
     *
     * We need to offset a bit more on the left to compensate for the border.
     * Parent cells have different border colors and widths above and to the
     * side, which creates a diagonal. This means there's what appears to be
     * a gap between the moved range line and the flag. We cover that up by
     * moving the flag over the left a bit.
     */
    margin: -@diff-cell-padding -@diff-cell-padding @diff-cell-padding
            -(@diff-cell-padding + @moved-border-right-width);
  }

  .moved-to-start, .moved-from-start {
    padding-top: 0;

    .moved-flag {
      border-radius: 0, 8px, 8px, 0;
      padding: 3px 1em 3px 0.5em;
    }
  }

  tbody {
    tr {
      &.selected {
        * {
          background: @diff-selected-color;
        }

        td .diff-collapse-btn {
          background: #E4D9CB;
        }
      }

      &.first {
        td, th {
          border-top: 1px @diff-line-border-color solid;
        }
      }

      &.highlight-anchor {
        td, th {
          background: @diff-highlight-color;
        }
      }

      td {
        background: @diff-background-color;
        padding: @diff-cell-padding;
        vertical-align: top;

        .collapse-floater {
          position: relative;
        }

        .diff-collapse-btn {
          @image-size: 14px;

          background: #E4D9CB;
          border: 1px black solid;
          padding: 5px;
          cursor: pointer;
          position: absolute;
          right: -8px;
          z-index: @z-index-diff-collapse-btn;
          opacity: 0.8;
          width: @image-size;
          height: @image-size;

          &:hover {
            opacity: 1.0;
          }
        }
      }

      th {
        color: @diff-linenum-color;
        font-weight: normal;
        background: @diff-linenum-background-color;
        cursor: pointer;
        padding-left: 1em;
        padding-right: @linenum-padding-right;
        text-align: right;
        vertical-align: top;
        white-space: nowrap;

        /*
         * The minimum width is calculated so that the th is always as wide as
         * the expand by 20 lines button, which is 28px wide.
         */
        min-width: calc(28px - 1em - @linenum-padding-right);

        .unselectable();

        .fa-warning {
          margin-left: 0.5em;
        }
      }
    }

    &.whitespace-file td {
      background: @diff-replace-color;
      border-bottom: 1px @diff-file-border-color solid;
      padding: 1em;
    }

    &.deleted td {
      background: @diff-delete-color;
      padding: 1em;

      a {
        color: #0000FF;
        text-decoration: underline;
      }
    }

    &.new-empty-file td {
      background: @diff-insert-color;
      padding: 1em;
    }

    &.no-changes td {
      padding: 1em;
    }

    &.binary {
      .inline-actions-header {
        background: @inline-actions-bg;
        border-bottom: 1px @diff-file-border-color solid;

        td {
          padding: 0;

          &:first-child {
            border-right: 1px @diff-line-border-color solid;
          }
        }
      }

      .inline-actions-right, .inline-actions-left {
        li {
          border-radius: 0;

          &:hover {
            background-color: @inline-actions-hover-bg;
          }
        }
      }

      .inline-actions-right {
        float: right;

        a {
          border-left: 1px @diff-file-border-color solid;
        }
      }

      .inline-actions-left {
        float: left;

        a {
          border-right: 1px @diff-file-border-color solid;
          border-left: 0px;
        }
      }

      .inline-files-container {
        td {
          &:first-child {
            border-right: 1px @diff-line-border-color solid;
          }

          &.diff-review-ui {
            padding: 0;
          }
        }
      }

      .file-thumbnail-container {
        margin: 0;
        overflow: hidden;
        padding: 1em;
        text-align: center;
        white-space: nowrap;
      }

      p {
        margin: 0;
        padding: 4px;
      }

      td {
        padding: 1em;
      }
    }

    &.delete {
      /*
       * Use the delete border colors for this chunk and for the top of the
       * following chunk. The delete border is darker than the borders of other
       * types of chunks, and contrasts much better with the delete background
       * color, so we always want it used for the top of the next diff row.
       */
      & tr,
      + tbody.equal tr.first,
      + tbody.delete tr.first,
      + tbody.insert tr.first,
      + tbody.replace tr.first {
        td {
          border-color: @diff-delete-border-color;
        }

        th {
          border-color: @diff-delete-linenum-border-color;
        }
      }

      tr {
        &.selected * { background: @diff-delete-selected-color; }
        &.highlight-anchor * { background: @diff-highlight-color; }

        td {
          background: @diff-delete-color;
        }

        th {
          background: @diff-delete-linenum-color;
        }
      }
    }

    &.equal {
      /*
       * Don't include a border for adjacent equals chunks. This will happen
       * when expanding diffs, and is specific to equals.
       */
      + tbody.equal tr.first {
        td, th {
          border-top: 0;
        }
      }
    }

    &.insert {
      /*
       * Use the insert border colors for this chunk and the top of a
       * following equal or replace chunks. The insert border color better
       * contrasts with the green than the border colors of the equal or
       * replace chunks. We don't want this for deletes.
       */
      & tr,
      + tbody.equal tr.first,
      + tbody.replace tr.first {
        td {
          border-color: @diff-insert-border-color;
        }

        th {
          border-color: @diff-insert-linenum-border-color;
        }
      }

      tr {
        &.selected * { background: @diff-insert-selected-color; }
        &.highlight-anchor * { background: @diff-highlight-color; }

        td {
          background: @diff-insert-color;
        }

        th {
          background: @diff-insert-linenum-color;
        }
      }
    }

    &.replace {
      /*
       * Use the replace border colors for this chunk and the top of a
       * following equal chunk.
       */
      & tr,
      + tbody.equal tr.first {
        td {
          border-color: @diff-replace-border-color;
        }

        th {
          border-color: @diff-replace-linenum-border-color;
        }
      }

      tr {
        &.selected * { background: @diff-replace-selected-color; }
        &.highlight-anchor * { background: @diff-highlight-color; }

        td {
          background: @diff-replace-color;
        }

        th {
          background: @diff-replace-linenum-color;
        }
      }

      &.dimmed {
        background: #FFFFFF;

        .hl { background: #FFFFFF; }
        th { background: #F0F0F0; }
      }

      .hl { background: #eff23d; }
    }

    &.diff-header {
      + tbody {
        td, th {
          border-top: 0;
        }
      }

      a {
        text-decoration: none;
        color: black;
      }

      code {
        margin: 0 2px;
      }

      img {
        vertical-align: middle;
        padding: 1px;
      }

      td {
        background: @diff-header-color;
        font-size: x-small;
        text-align: center;
      }

      th {
        background: @diff-header-color;
      }

      tr {
        &:first-child {
          td, th {
            border-top: 1px darken(@diff-header-color, 10%) solid;
          }
        }

        &:last-child {
          td, th {
            border-bottom: 1px darken(@diff-header-color, 10%) solid;
          }
        }
      }
    }
  }

  thead {
    /*
     * Remove the top border on the diff header or chunk following the file
     * header, so that the file header's border takes precedence.
     */
    + tbody {
      tr.first, tr:first-child {
        td, th {
          /*
           * Ideally we wouldn't use !important, but we otherwise need to
           * have this rule for each type of tbody, which we don't want.
           */
          border-top: 0 !important;
        }
      }
    }

    th {
      background: @diff-file-color;
      font-size: 120%;
      font-weight: bold;
      text-align: left;
      text-overflow: ellipsis;
    }

    .filename-row th {
      overflow: hidden;
      padding: 8px;

      #gradient > .vertical-three-colors(#FFFFFF, @diff-file-color, 50%, @diff-file-color);
    }

    .revision-row th {
      border-bottom: 1px @diff-file-border-color solid;
      font-size: 100%;
      font-weight: normal;
      padding: 8px 0;

      &.revision-col {
        overflow: hidden;
      }

      .rb-icon {
        vertical-align: text-top;
      }
    }
  }

  thead th.controls,
  th.controls {
    font-size: 100%;
    font-weight: normal;
    padding: 2px 0 2px 2px;
    vertical-align: top;
  }
}

.commentflag {
  border-radius: @comment-flag-border-radius;
  display: none;
  left: -0.7em;
  margin-top: -0.3em;
  position: absolute;
  width: 1.6em;

  .commentflag-shadow {
    border-radius: @comment-flag-border-radius;
    opacity: 0.1;
    background-color: black;
    border: 1px solid black;
    bottom: 0;
    left: 0.2em;
    position: absolute;
    right: 0;
    top: 0.2em;
    width: 100%;
  }

  .commentflag-inner {
    border-radius: @comment-flag-border-radius;
    opacity: 0.95;
    background-color: @comment-flag-color;
    border: 1px solid @comment-flag-border-color;
    bottom: 0.2em;
    cursor: pointer;
    font-size: 90%;
    font-weight: normal;
    left: 0;
    line-height: 1.7em;
    position: absolute;
    right: 0.2em;
    text-align: center;
    top: 0;
    vertical-align: top;
    width: 100%;
    z-index: @z-index-deco;

    span {
      background: transparent !important;
      .unselectable();
    }
  }
}

.selected .commentflag .commentflag-inner {
  background-color: @comment-flag-color;
}

.selected .commentflag .commentflag-inner,
.commentflag .commentflag-inner:hover {
  background-color: @comment-flag-hover-color;
}

.commentflag.draft .commentflag-inner {
  background-color: @comment-flag-draft-color;
  border-color: @comment-flag-draft-border-color;
}

.selected .commentflag.draft .commentflag-inner,
.commentflag.draft .commentflag-inner:hover {
  background-color: @comment-flag-draft-hover-color;
}

.ghost-commentflag {
  cursor: pointer;
  position: absolute;
  left: 0.1em;
  margin-top: -0.1em;
  height: 21px;

  .commentflag-inner {
    background-color: @comment-flag-ghost-color;
    border-color: @comment-flag-ghost-border-color;
  }
}

#diffs {
  list-style: none;
  margin: 0;
  padding: 0;

  /* Allows highlight chunks to be absolute relative to this. */
  position: relative;

  div.index ol {
    margin-bottom: 20px;
    padding-left: 30px;
  }

  .diff-container {
    margin-bottom: 1em;
    position: relative;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .diff-box {
    border: 1px @diff-border-color solid;
    border-radius: @box-border-radius;
    box-shadow: @box-shadow;
    overflow: hidden;
  }

  .diff-highlight {
    background-color: rgba(0, 0, 255, 0.2);
    display: block;
    font-size: 0; /* Prevents the 13px minimum height in IE6 */
    position: absolute;
    left: 0;
    top: 0;
  }
}

/**
 * The diff file index table.
 *
 * This can appear either within the review request box, or as a docked item
 * within the unified review banner.
 */
table.rb-c-diff-file-index {
  @icon-size: 20px;
  @icon-offset: 2px;

  border-collapse: collapse;
  border: @review-request-field-border;
  padding: 0;
  width: 100%;

  tr {
    &:first-child td {
      border-top: 0;
    }
  }

  td {
    background: #FDFDFD;
    padding: 0.6em;
    margin: 0;
    border-top: @review-request-field-table-divider-border;
    vertical-align: top;

    &.diff-chunks-cell {
      color: #888;
      text-align: right;
      width: 70%;
    }

    &.diff-file-icon {
      padding: @icon-offset 0 0 @icon-offset;

      .rb-icon {
        width: @icon-size;
        height: @icon-size;
      }

      .fa-spinner {
        font-size: @icon-size - 4px;
        margin: 2px;
      }
    }

    &.diff-file-info {
      padding-left: 0.3em;
      white-space: nowrap;
      width: 30%;

      .diff-file-rename {
        color: #888;
        display: block;
        font-size: 90%;
        font-style: italic;
        padding: 1em 0 0 0;
      }
    }

    a {
      color: @link-color;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }

      &.dimmed {
        color: #ABABAB;
      }
    }

    .diff-chunks {
      max-height: 2.5em;
      overflow: hidden;
      text-align: right;

      a {
        border-radius: 50%;
        display: inline-block;
        margin: 3px 2px 0 2px;
        width: 8px;
        height: 8px;

        &.insert {
          background-color: @diff-insert-dot-color;
        }

        &.delete {
          background-color: @diff-delete-dot-color;
        }

        &.replace {
          background-color: @diff-replace-dot-color;
        }
      }
    }
  }
}

/**
 * The diff file index when docked into the unified banner.
 *
 * Structure:
 *     <div class="rb-c-diff-file-index-dock">
 *      <div class="rb-c-diff-file-index-dock__table">
 *       <table class="rb-c-diff-file-index">...</table>
 *       <a href="#" class="rb-c-diff-file-index-dock__disclosure">
 *        <span class="fa fa-bars"></span>
 *       </a>
 *      </div>
 *     </div>
 */
.rb-c-diff-file-index-dock {
  display: flex;

  /**
   * The disclosure icon for when the table is collapsed.
   */
  &__disclosure {
    font-size: 120%;
    padding: 4px 0 4px 8px;
  }

  &__table {
    border: @review-request-field-border;
    flex-grow: 1;
    overflow: hidden;
  }

  table.rb-c-diff-file-index, tr, td {
    border: none;
  }

  &.-is-expanded {
    .rb-c-diff-file-index-dock__table {
      transition: max-height 0.3s;
    }

    table {
      transform: inherit !important;
      transition: transform 0.3s;
    }
  }
}


/****************************************************************************
 * Diff information
 ****************************************************************************/
#diff-details {
  border-spacing: 8px;

  &.loading {
    .commit-list-container,
    .diff-index-container {
      background-color: #FFFFFF;
      border: @review-request-field-border;
      font-size: 16px;
      height: 16px;
      padding: @box-padding;
    }
  }

  #diff_revision_label h1 {
    color: @review-request-label-color;
    font-size: 120%;
    margin: 0;
    padding: 0;
  }

  .main {
    padding: 1em;

    h1, p {
      margin: 1em 0;
      padding: 0;
    }
  }

  .section-header-label {
    color: @review-request-label-color;
    font-size: 120%;
    margin: 1em 0;
    padding: 1em 0 0 0;
  }
}

.revision-selector-grabbed,
.revision-selector-grabbed * {
  cursor: grabbing !important;
}

.revision-selector {
  margin: 3em 1.5em 1.5em 1.5em;
  position: relative;

  .revision-selector-trough {
    border-bottom: 1px solid black;
  }

  .revision-selector-tick {
    position: absolute;
    top: -8px;
    height: 16px;
    border-left: 1px solid black;
  }

  .revision-selector-label {
    position: absolute;
    top: -26px;

    .user-select(none);

    &.revision-selector-label-active {
      cursor: pointer;
    }
  }

  .revision-selector-handle {
    position: absolute;
    top: -9px;
    z-index: 2;
    cursor: grab;
  }

  .revision-selector-range {
    position: absolute;
    background-color: grey;
    top: -1px;
    height: 4px;
    z-index: 1;
  }
}


/****************************************************************************
 * Comments hint
 ****************************************************************************/
.comments-hint li {
  &.current {
    font-weight: bold;
  }

  &:not(.current) {
    color: @link-color;
    text-decoration: underline;
    cursor: pointer;
  }
}


/****************************************************************************
 * Pagination
 ****************************************************************************/
.paginate-link,
.paginate-current {
  padding: 2px 4px;
  border: 1px solid @paginate-border-color;
}

.paginate-current {
  background: @paginate-bg-color;
  color: @paginate-text-color;
  font-weight: bold;
}

#pagination2 {
  margin-top: 1em;
}


/**
 * Displayed Unicode Character.
 *
 * This is used to show information on a possibly otherwise-invisible or
 * misleading Unicode character.
 *
 * Structure:
 *     <span class="rb-o-duc" data-codepoint="..." data-char="..."
 *           title="..."></span>
 */
.rb-o-duc {
  &::before {
    background: white;
    border-radius: 2px;
    color: red;
    font-weight: normal;
    font-style: normal;
    padding: 0 0.5ch;

    /* Use outline instead of border to avoid affecting layout. */
    outline: 1px red solid;
    content: "U+" attr(data-codepoint);
  }
}


/**
 * A notice at the top of a file diff.
 *
 * Structure:
 *     <tbody class="rb-c-diff-file-notice">
 *      <tr>
 *       <td>
 *        <div class="rb-c-alert ...">...</div>
 *       </td>
 *      </tr>
 *     </tbody>
 */
.sidebyside tbody.rb-c-diff-file-notice {
  a {
    color: @link-color;
  }

  td {
    padding: 0;
  }

  .rb-c-alert {
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-radius: 0;
  }
}
